@charset "utf-8";
/**
 *  部落 - 动漫
 */

$font-12: 12px;
$font-14: 14px;
$font-16: 16px;
$font-18: 18px;
$font-20: 20px;
$font-22: 22px;
$font-24: 24px;

$color-01: #171717;
$color-02: #515151;
$color-03: #909090;
$color-04: #c1c1c1; //(输入框边框颜色)
$color-05: #eeeeee; //(背景色)
$color-06: #499af5;
$color-07: #ffb30e;
$color-08: #e43f3f;

/**
 * 定义进度条颜色
 */

$pro-color-1: #ffb30e;
$pro-color-2: #499af5;
$pro-color-3: #5BCC39;
$pro-color-4: #499af5;
$pro-color-5: #FF6D33;
$pro-color-6: #ffb30e;
$pro-color-7: #5BCC39;

.container {
  padding: 0;
}

.selected-yellow {
  color: $color-07 !important;
}

#tribe-cartoon {
  background: white;
  .container {
    //border:1px solid red;
    >div{
      background-color:#fff ;
    }
  }

  /**
   *
   * 部落头部区域
   * ===================
   */
  .cartoon-header {
    margin-top: 220px;
    border: 1px solid $color-04;
    height: 200px;
    position: relative;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, .35);

    // 部落图标
    > .tribe-icon {
      width: 110px;
      height: 110px;
      position: absolute;
      left: 20px;
      top: -55px;
      &:hover > .tribe-edit-icon {
        cursor: pointer;
        position: absolute;
        left: 0px;
        top: 0px;
        display: block;
        width: 106px;
        height: 121px;
        background: rgba(0, 0, 0, 0.3) url('/static/images/pc/version1.1/icon/icon_edit.png') no-repeat center;

      }
    }

    // 部落工具按钮
    > .tools-bar {
      margin-left: 130px;
      //border:1px solid green;

      > li {
        color: #FFF;
        float: left;
        margin-left: 16px;
        margin-top: 16px;
        cursor: pointer;
      }

      // 赞
      > li:nth-child(2) {
        background: url('/static/images/pc/version1.1/icon/icon_hand.png') no-repeat;
        color: $color-06;
        float: left;
        padding-left: 30px;
        margin-left: 30px;
        margin-top: 25px;
      }

      // 100
      > li:nth-child(3) {

      }

      // VIP
      > li:nth-child(4), > li:nth-child(3) {
        color: #FFF;
        float: left;
        background: $color-03;
        margin-left: 30px;
        margin-top: 25px;
        border-radius: 3px;
        padding-left: 5px;
        padding-right: 5px;
      }

    }

    // 部落详情 描述 名称 酋长
    > .tribe-info {
      font-family: "Microsoft YaHei", "Arial", "Simsun,sans-self";
      //border:1px solid blue;
      margin-top: 80px;
      margin-left: 20px;
      width: 730px;
      > span {
        display: block;
      }

      // 部落名称
      > span:nth-child(1) {
        font-size: $font-16;
        color: $color-01;
        font-weight: bold;
      }

      // 部落简介
      > span:nth-child(2) {
        font-size: $font-14;
        color: $color-03;
        margin-top: 16px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      // 部落酋长名称
      > div {
        font-size: $font-14;
        color: $color-01;
        margin-top: 20px;
        > span {
          color: $color-06;
        }
      }
    }

    // 荣誉 粉丝数量 赞 诞生
    & > .tribe-honor {
      position: absolute;
      //border:1px solid red;
      right: 60px;
      top: 35px;
      font-size: $font-16;
      color: $color-07;

      // label
      span {
        margin-top: 15px;
        float: left;
        display: block;
        //border:1px solid red;
        width: 50px;
        height: 25px;
        color: $color-02;
      }

      // 点赞,粉丝,数量
      span:nth-child(2) {
        color: $color-07;
      }
    }

    //斜线
    .tribe-bias {
      margin: 10px 0;
      padding-top: 24px;
      width: 98px;
      font: 12px/2em georgia;
      color: #fff;
      text-indent: 2em;
      position: absolute;
      top: -38px;
      right: -36px;
      z-index: 3;
      transform: rotate(40deg);
      border-left: 22px solid transparent;
      border-top: 20px solid transparent;
      border-right: 17px solid transparent;
      border-bottom: 20px solid #d23c18;;
      &:after {
        content: " ";
        display: block;
        position: absolute;
        z-index: -3;
        bottom: 100%;
        left: 71px;
        top: 42px;
        width: 0;
        height: 0;
        border-left: 0px solid transparent;
        border-top: 4px solid transparent;
        border-right: 4px solid #9d3016;
        border-bottom: 0px solid #9d3016;
        transform: rotate(44deg);
      }
      &:before {
        content: " ";
        display: block;
        position: absolute;
        z-index: -3;
        bottom: 100%;
        left: -20px;
        top: 40px;
        width: 0;
        height: 0;
        border-left: 0px solid transparent;
        border-top: 7px solid transparent;
        border-right: 4px solid #9d3016;
        border-bottom: 0px solid #9d3016;
        transform: rotate(51deg);
      }
    }

    // 星星
    .tribe-start {
      position: absolute;
      right: 19px;
      top: 9px;
      z-index: 3;
      font-size: 1em;
      color: #FFF;
    }

  }

  /**
   * 内容区 人物造型 - 漫画 - 视频 - 剧集
   * ===================
   */

  .cartoon-content {
    margin-top: 15px;
    border: 1px solid $color-04;
    height: 648px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 30px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, .35);

    // 内容区导航
    & > .content-nav {

      & > li {
        cursor: pointer;
        margin-right: 40px;
        color: $color-03;
        font-size: $font-16;
        float: left;
        &.exit {
          font-size: $font-12;
          color: $color-06;
          //float: right;
          line-height: 40px;
          float: right;
        }
        &:hover {
          color: $color-07;
        }
      }
      button {
        background-color: $color-07;
        float: right;
      }
    }

    /**
     * 漫画列表 ul
     * ============
     */
    .cartoon-content-list {
      clear: both;
      //border:1px solid red;
      width: 980px;
      margin-left: -20px;
      height: 520px;

      // li
      .cartoon-deatil {
        position: relative;
        cursor: pointer;
        float: left;
        width: 225px;
        height: 225px;
        //border:1px solid green;
        margin-left: 12px;
        margin-top: 20px;
        box-shadow: 0px 1px 3px rgba(0, 0, 0, .35);
        transition: box-shadow .3s;

        // 缩略图
        img {
          width: 100%;
          height: 100%;
        }

        &:hover {
          box-shadow: 0px 5px 13px rgba(0, 0, 0, .35);
        }

        // 删除按钮
        &:hover .cartoon-del {
          background: url('/static/images/pc/version1.1/icon/icon_delete.png') no-repeat center;
          width: 50px;
          height: 50px;
          display: block;
          position: absolute;
          right: 0px;
          top: 0;
          z-index: 2;
        }
      }

      // video li
      & > .video-detail {
        position: relative;
        cursor: pointer;
        float: left;
        width: 250px;
        height: 190px;
        //border:1px solid green;
        margin-left: 45px;
        margin-top: 40px;
        box-shadow: 0px 1px 3px rgba(0, 0, 0, .35);
        transition: box-shadow .3s;
        b {
          background-image: url("../../../js/pc/mediaelement/build/bigplay.png");
          width: 100px;
          height: 100px;
          display: inline-block;
          position: absolute;
          top:50%;
          left:50%;
          margin: -50px;
        }
        &:hover {
          box-shadow: 0px 5px 13px rgba(0, 0, 0, .35);
          // 删除按钮
          &:hover .cartoon-del {
            background: url('/static/images/pc/version1.1/icon/icon_delete.png') no-repeat center;
            width: 50px;
            height: 50px;
            display: block;
            position: absolute;
            right: 0px;
            top: 0;
            z-index: 2;
          }
        }
        img {
          width: 100%;
          height: 100%;
        }
        // 视频
        video {
          width: 100%;
          height: 100%;
        }

        // 视频封面
        //&:hover >.video-cover {
        //  transition:background .3s;
        //  background: rgba(0,0,0,0.3)url('/static/images/pc/version1.1/icon/icon_video_play.png') no-repeat center;
        //  width: 100%;
        //  height: 100%;
        //  display: block;
        //  position: absolute;
        //  right: 0px;
        //  top:0;
        //  z-index: 2;
        //}
      }
      // novel li
      & > .novel-detail {
        position: relative;
        cursor: pointer;
        float: left;
        width: 234px;
        margin-right: 7px;
        font-size: $font-16;

        color: $color-03;
        //border:1px solid green;
        //margin-left: 15px;
        margin-top: 20px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        &:hover {
          color: $color-07;
        }
      }

      .content-null-add {
        position: relative;
        margin: 147px auto;
        width: 65px;
        input {
          position: absolute;
          background-color: #0f0f0f;
          height: 112px;
          width: 65px;
          top: 0;
          left: 0;
          filter: alpha(opacity=0);
          -moz-opacity: 0;
          -khtml-opacity: 0;
          opacity: 0;
          cursor: pointer;
        }
        b {
          background-image: url("../../../images/pc/version1.1/icon/icon_tribe_addwork.png");
          display: inline-block;
          width: 65px;
          height: 65px;
          margin-bottom: 20px;
        }
      }
    }

    /**
     * 视频列表 ul
     * ============
     */
    .video-content-list {
      margin-top: 15px;
      clear: both;
      //border:1px solid red;
      width: 920px;
      height: 520px;

    }

    /**
     * 剧集列表 ul
     * ============
     */
    .novel-content-list {
      margin-top: 15px;
      clear: both;
      //border:1px solid red;
      width: 965px;
      height: 520px;

      // padding-left: 23px;

    }
    /**
     * 空白状态
     * ============
     */
    .content-null {

      width: 520px;
      height: 400px;
      border: 1px dashed $color-04;
      margin: 110px auto;

    }
  }

  /**
   * 进度区 启程-动画片-游戏-影视剧-大电影-衍生品
   * ===================
   */
  div.tribe-progress {
    height: 240px;
    background-color: $color-05;
    &:before {
      content: "";
      display: table;
    }

    // 进度条高度
    $pro-border: 3px;

    // 进度条宽度 2 3 4 5 6
    $pro-with: 142px;

    #progressBar {
      width: 970px;
      background: #CCC;
      height: $pro-border;
      margin-top: 110px;
      & > li {
        position: relative;
        margin: 0px auto;
        float: left;
        width: $pro-with;
        height: $pro-border;
        background-color: $color-03;
        border-color: $color-03;
        &:after {
          border-color: $color-03;
          color: $color-03;
        }
        &:before {
          border-color: $color-03;
          color: $color-03;
        }

        // 申请开通 通用
        .progress-msg {
          display: none;
          background-color: inherit;
          border-radius: 3px;
          padding: 14px 30px;
          min-height: 30px;
          position: absolute;
          bottom: 55%;
          left: 0;
          z-index: 5;
          div {
            color: #fff;
            width: 174px;
            p {
              margin-bottom: 0;
              line-height: 30px;
            }
          }
        }

        //进度图标 开通前 通用
        .progress-icon {
          background-color: $color-03;
          border-color: $color-03;
          cursor: pointer;
          position: absolute;
          top: -20px;
          width: 42px;
          height: 42px;
          border-radius: 50%;
          i {
            position: relative;
            z-index: 20;
            width: 42px;
            height: 42px;
            display: inline-block;
          }
          b {
            display: inline-block;
            width: 41px;
            height: 9px;
            background-color: inherit;
            position: absolute;
            top: 16px;
            z-index: 11;
          }
          > span {
            position: absolute;
            left: -68px;
            width: 178px;
            display: inline-block;
            z-index: 3;
            padding-top: 25px;
            white-space: nowrap;
            height: 59px;
            text-align: center;
          }
          span.timeline-before {
            //left: -45px;
            top: 23px;
          }
          span.timeline-after {
            //left: -8px;
            bottom: 47px;
          }
          &:hover .progress-msg {
            display: block;
            box-shadow: 0px 1px 3px black;
          }
          &:hover {
            box-shadow: 0px 1px 3px black;
          }
        }

        //开通后 通用
        &.progress-finish {
          .progress-icon {
            background-color: inherit;
          }
          &:after {
            border-color: inherit;
            color: inherit;
          }
          &:before {
            border-color: inherit;
            color: inherit;
          }
        }
        //开通后 颜色样式
        &:nth-child(1).progress-finish, &:nth-child(6).progress-finish {
          border-color: $pro-color-1;
          background-color: $pro-color-1;
          color: $pro-color-1;
        }
        &:nth-child(2).progress-finish, &:nth-child(4).progress-finish {
          border-color: $pro-color-2;
          background-color: $pro-color-2;
          color: $pro-color-2;
        }
        &:nth-child(3).progress-finish, &:nth-child(7).progress-finish {
          border-color: $pro-color-3;
          background-color: $pro-color-3;
          color: $pro-color-3;
        }
        &:nth-child(5).progress-finish {
          border-color: $pro-color-5;
          background-color: $pro-color-5;
          color: $pro-color-5;
        }

        // 进度1
        &:nth-child(1) {
          width: 96px;

          // 进度图标
          .progress-icon {
            z-index: 10;
            left: 45px;
            i {
              background-position-x: 1px;
              background-image: url("../../../images/pc/version1.1/icon/icon_m_start.png");
            }
            //span.timeline-before{
            //  left: -45px;
            //  top: 23px;
            //}
          }
          &:after {
            border-radius: 50%;
            background: $color-05;
            content: "";
            position: absolute;
            left: 36px;
            bottom: -29px;
            width: 59px;
            height: 59px;
            border-style: solid;
            border-width: $pro-border;
          }
          &:before {
            font-size: $font-18;
            z-index: 3;
            background: $color-05;
            content: "";
            padding-top: 25px;
            padding-left: 10px;
            white-space: nowrap;
            position: absolute;
            left: 0px;
            top: $pro-border;
            width: 178px;
            height: 59px;
          }
        }

        // 进度2
        &:nth-child(2) {

          // 进度图标
          .progress-icon {
            z-index: 9;
            left: 92px;
            i {
              background-position-x: 1px;
              background-image: url("../../../images/pc/version1.1/icon/icon_m_cartoon.png");
            }
            //span.timeline-after{
            //  left: -8px;
            //  bottom: 47px;
            //}
          }

          &:after {
            background: $color-05;
            font-size: $font-18;
            content: "";
            padding-left: 70px;
            position: absolute;
            left: 24px;
            bottom: $pro-border;
            width: $pro-with;
            height: 59px;
            z-index: 2;
          }
          &:before {
            background: $color-05;
            content: "";
            position: absolute;
            right: 0px;
            top: -29px;
            width: 59px;
            height: 59px;
            border-style: solid;
            border-width: $pro-border;

            border-radius: 50%;
          }
        }

        // 进度3
        &:nth-child(3) {

          // 进度图标
          .progress-icon {
            z-index: 8;
            left: 92px;
            i {
              background-position-x: 2px;
              background-image: url("../../../images/pc/version1.1/icon/icon_m_flash.png");
            }
          }

          &:after {
            background: $color-05;
            content: "";
            position: absolute;
            right: 0px;
            bottom: -29px;
            width: 59px;
            height: 59px;
            border-radius: 50%;
            border-style: solid;
            border-width: $pro-border;
          }
          &:before {
            z-index: 3;
            background: $color-05;
            font-size: $font-18;
            padding-top: 25px;
            padding-left: 66px;
            content: " ";
            position: absolute;
            right: -16px;
            top: $pro-border;
            width: $pro-with;
            height: 59px;
          }
        }

        // 进度4
        &:nth-child(4) {

          // 进度图标
          .progress-icon {
            z-index: 7;
            left: 92px;
            i {
              background-position-x: 1px;
              background-image: url("../../../images/pc/version1.1/icon/icon_m_game.png");
            }
            .progress-msg {
              left: 0;
            }
          }

          &:after {
            background: $color-05;
            padding-left: 66px;
            font-size: $font-18;
            content: " ";
            position: absolute;
            left: 27px;
            bottom: $pro-border;
            width: $pro-with;
            height: 59px;
            z-index: 3;
          }
          &:before {
            background: $color-05;
            content: "";
            position: absolute;
            right: 0px;
            top: -29px;
            width: 59px;
            height: 59px;
            border-style: solid;
            border-width: $pro-border;
            border-radius: 50%;
          }
        }

        // 进度5
        &:nth-child(5) {
          // 进度图标
          .progress-icon {
            z-index: 6;
            left: 92px;
            i {
              background-position-x: 1px;
              background-image: url("../../../images/pc/version1.1/icon/icon_m_tv.png");
            }
          }

          &:after {
            background: $color-05;
            content: "";
            position: absolute;
            right: 0px;
            bottom: -29px;
            width: 59px;
            height: 59px;
            border-style: solid;
            border-width: $pro-border;
            border-radius: 50%;
          }
          &:before {
            z-index: 3;
            background: $color-05;
            content: " ";
            font-size: $font-18;
            padding-top: 25px;
            padding-left: 66px;
            position: absolute;
            left: 15px;
            top: $pro-border;
            width: $pro-with;
            height: 59px;

          }
        }

        // 进度6
        &:nth-child(6) {

          // 进度图标
          .progress-icon {
            z-index: 5;
            left: 92px;
            i {
              background-position-x: 2px;
              background-image: url("../../../images/pc/version1.1/icon/icon_m_film.png");
            }
          }

          &:after {
            background: $color-05;
            content: " ";
            padding-left: 66px;
            position: absolute;
            left: 24px;
            bottom: $pro-border;
            width: $pro-with;
            height: 59px;
            z-index: 2;
          }
          &:before {
            background: $color-05;
            content: "";
            position: absolute;
            right: 0px;
            top: -29px;
            width: 59px;
            height: 59px;
            border-style: solid;
            border-width: $pro-border;
            border-radius: 50%;
          }
        }

        // 进度7
        &:nth-child(7) {
          width: 163px;

          // 进度图标
          .progress-icon {
            z-index: 4;
            left: 100px;
            i {
              background-position-x: 1px;
              background-image: url("../../../images/pc/version1.1/icon/icon_m_other.png");
            }

            &:hover {
              z-index: 6;
            }
          }
          //提示框
          .progress-msg {
            left:initial;
            right:0;
          }

          &:after {
            border-radius: 50%;
            background: $color-05;
            content: "";
            position: absolute;
            right: 14px;
            bottom: -29px;
            width: 59px;
            height: 59px;
            border-style: solid;
            border-width: $pro-border;
          }
          &:before {
            z-index: 3;
            background: $color-05;
            content: " ";
            font-size: $font-18;
            padding-top: 25px;
            padding-left: 98px;
            position: absolute;
            left: 0px;
            top: $pro-border;
            width: 152px;
            height: 59px;
          }
        }
      }
    }
  }

  /**
   * 大众评论区
   * ===================
   */
  .tribe-comments {
    border: 1px solid $color-04;
    margin-bottom: 20px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, .35);
  }

  /**
   * 申请开通 - 模态框
   * ===================
   */
  .tribe-apply-model {
    background: #FFF;
    height: 420px;
    width: 650px;
    margin-top: -210px;
    padding-top: 70px;
    padding-bottom: 70px;
    //border:1px solid red;

    // Form 表单
    & > form {
      background: #FFF;
      //border:1px solid red;
      height: 100%;
      font-size: $font-18;
      color: $color-01;

      .checkbox {
        &:nth-child(1) {
          margin-bottom: 114px;
          margin-left: -120px;
        }
        &:nth-child(2) {
          margin-bottom: 70px;
          margin-left: -120px;
        }

        label {
          margin-left: 103px;
        }
        input {
          margin-right: 10px;
        }
      }

    }

  }

  /**
  * 添加、编辑 - 剧集 - 模态框
  * ===================
  */
  .tribe-novel-model {
    position: absolute;
    padding-top: 36px;
    top: 50%;
    left: 50%;
    margin: -345px 0 0 -465px;
    background: #FFF;
    height: 690px;
    width: 930px;
    //border:1px solid red;

    .form-group {
      margin-left: 0;
      .col-md-offset-1 {
        margin-left: 40px;
      }
      label {
        margin: 0;
        margin-left: 40px;
        padding-right: 16px;
        line-height: 50px;
      }
      input {
        width: 783px;
        height: 50px;
      }
    }
  }

}

.editbgbox {
  //background-color: transparent !important;
  position: relative;
  width: 65px;
  height: 25px;
  overflow: hidden;
  span {
    line-height: 25px;
  }
  input {
    position: absolute;
    top: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
  }
}
